<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		createSheet();
	});

	function createSheet() {
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		setConfig();
		setInitHeaders();
		setInitColumns();
		
		setImageList();
		
		doAction('search');
	}
	
	function setConfig() {
		var cfg = {FrozenCol:0, SearchMode:smLazyLoad, Page:30};
		mySheet.SetConfig(cfg);
	}

	function setInitHeaders() {
		var headers = [ {Text:"NO|상태|삭제|문자열|콤보|콤보에디트|팝업|팝업에디트|자동합계|자동평균|정수|실수|날짜|패스워드|체크박스|라디오|", Align:"Center"} ];
		var info = {Sort:1, ColMove:1, ColResize:1, HeaderCheck:0};
		
		mySheet.InitHeaders(headers, info);
	}
	
	function setInitColumns() {
		var col = [
					{Type:"Seq", Align:"Right", VAlign:"Middle"},
					{Type:"Status", Align:"Center"},
					{Type:"DelCheck"},
					{Type:"Text", KeyField:1, Align:"Center"},
					{Type:"Combo", Width:80, ComboText:"대기|진행중|완료", ComboCode:"01|02|03",PopupText:"대기|진행중|완료"},
					{Type:"ComboEdit", Width:80, ComboText:"고려대학교|고려대학교2|국민대학교|서울대학교|숙명여자대학교|연세대학교|울산대학교|울산과학기술대학교|이화여자대학교|인천대학교|인천가톨릭대학교"},
					{Type:"Popup", Width:100},
					{Type:"PopupEdit", Width:100},
					{Type:"AutoSum", Align:"Right",Width:70,Format:"NullInteger"},
					{Type:"AutoAvg", Align:"Right",Width:70, Format:"NullFloat"},
					{Type:"Int", Align:"Right", Format:"Integer",Width:70, Hidden:1},
					{Type:"Float", Align:"Right", Format:"Float",Width:70, Hidden:1},
					{Type:"Date", Align:"Center", Format:"Ymd", Width:100},
					{Type:"Pass", Hidden:1},
					{Type:"CheckBox"},
					{Type:"Radio"}
		          ];
		
		mySheet.InitColumns(col);
		
		mySheet.FitColWidth();
	}
	
	function setImageList() {
		mySheet.SetImageList(0, "../image/01.gif");
		mySheet.SetImageList(1, "../image/02.gif");
		mySheet.SetImageList(2, "../image/03.gif");
		mySheet.SetImageList(3, "../image/04.gif");
		mySheet.SetImageList(4, "../image/05.gif");
		mySheet.SetImageList(5, "../image/06.gif");
	}
	
	function getImageList(num) {
		return mySheet.GetImageList(num);
	}

	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data.xml");
				break;
				
			case "init":		//초기화
				mySheet.Reset();
				createSheet();
				break;
		}
	}
	
	function mySheet_OnMouseDown(Button, Shift, X, Y) {
		$('#row_id').val(mySheet.MouseRow());
		$('#col_id').val(mySheet.MouseCol());
	}
	
	function setImageColumn() {
		
		var row = $('#row_id').val();
		var col = $('#col_id').val();
		var num = $('#img_num').val();
		
		row = row?row:-1;		// 값이 비어 있으면 -1로 상태를 변경한다.
		col = col?col:-1;		// 값이 비어 있으면 -1로 상태를 변경한다.
		num = num?num:-1;
		
		if (row > -1 && col > -1 && num > -1 && num < 6) {
			var iType = mySheet.GetCellProperty(row, col, "Type");
			
			if (iType == "Text"
				|| iType == "AutoSum"
				|| iType == "AutoAvg"
				|| iType == "Int"
				|| iType == "Float") {
				mySheet.SetCellImage(row, col, getImageList(num));
			} else {
				alert("이미지를 표시할수 없는 형식의 셀입니다.");
			}
		} else {
			alert("적용할 셀의 정보가 없거나 잘못 되었습니다.");
		}
		
	}
	
</script>
<title>이미지 컬럼 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">이미지 컬럼 예제</div>
	<div id="desc">
		ImageList메서드, InitColumns(ImgWidth, ImgHeight),텍스트와 이미지가 같이 들어간 컬럼 예제
	</div>
	<div align="right">
		<input type="button" value="초기화" onclick="doAction('init')">
		<input type="button" value="조회" onclick="doAction('search')">
	</div>
	<div id="functionArea">
		<div>
			ImageList 메서드를 사용하여 이미지를 설정한다.<br>
			mySheet.SetImageList(0, "../image/01.gif"); &nbsp;&nbsp;&nbsp;&nbsp; // 이미지 0 : <img src="../image/01.gif"><br>
			mySheet.SetImageList(1, "../image/02.gif"); &nbsp;&nbsp;&nbsp;&nbsp; // 이미지 1 : <img src="../image/02.gif"><br>
			mySheet.SetImageList(2, "../image/03.gif"); &nbsp;&nbsp;&nbsp;&nbsp; // 이미지 2 : <img src="../image/03.gif"><br>
			mySheet.SetImageList(3, "../image/04.gif"); &nbsp;&nbsp;&nbsp;&nbsp; // 이미지 3 : <img src="../image/04.gif"><br>
			mySheet.SetImageList(4, "../image/05.gif"); &nbsp;&nbsp;&nbsp;&nbsp; // 이미지 4 : <img src="../image/05.gif"><br>
			mySheet.SetImageList(5, "../image/06.gif"); &nbsp;&nbsp;&nbsp;&nbsp; // 이미지 5 : <img src="../image/06.gif">
		</div>
		<br>
		<div>
			<span>행 : <input id="row_id" size=4 type="text"/></span>
			<span>열 : <input id="col_id" size=4 type="text"/></span>
			<span>이미지번호 : <input id="img_num" size=4 type="text"/></span>
			<input type="button" value="적용하기" onclick="setImageColumn()">
		</div>
	</div>
	<div id="viewArea">
	</div>
</div>
</body>
</html>